<template>
  <div>
    <el-card style="padding: 0.5em">
      <div>
        <el-tag type="danger">{{article.type}}</el-tag>
        <el-tag class="left">{{article.classifyName}}</el-tag>
        <span class="left" style="font-size: 12px">7天前发表</span>
        <span class="left" style="font-size: 12px">1天前更新</span>
        <span class="left" style="font-size: 12px; white-space: nowrap"
          >{{article.readTime}}分钟读完, (大约{{article.words}}个字)</span
        >
      </div>
      <markdown-it-vue :content="article.content" />
    </el-card>
  </div>
</template>
<script>
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
export default {
  props: {
    articleId: String
  },
  components: {
    MarkdownItVue,
  },
  name: "",
  data() {
    return {
      article: {
        content: "",
        title: "",
        type: "",
        classifyName: "",
        readTime: "",
        words: ""
      }
    };
  },
  methods: {
    async getArticle(articleId) {
      let res = await this.$http.get("/article/" + articleId.toString())
      if (res.statusCode == 200) {
        let data  = res.data
        this.article = data
        this.article.content =this.$utf8to16(window.atob(data.content))
      }
    }
  },
  mounted() {
    let articleId = this.$route.params.articleId
    this.getArticle(articleId)
	  this.$articleLoading = false
  }
};
</script>
<style scoped>
.left {
  margin-left: 1.2em;
}
</style>